<template>
    <div class="com-container">
        <div class="com-chart" ref='hot_ref'></div>
        <span class="iconfont arr_left" @click="toLeft" :style='comStyle'>&#xe783;</span>
        <span class="iconfont arr_right" @click="toRight" :style='comStyle'>&#xe633;</span>
        <span class="cat-name" :style='comStyle'>{{catName}}</span>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {request} from 'network/request' 
    import {getThemeValue} from '@/utils/theme_utils'
    import {watchThemeMixin} from '@/common/mixin'
    export default {
        name: '',
        data () {
            return {
                chartInstance:null,
                data:null,
                currentIndex:0,//所展示的一级分类索引值
                titleFontSize:0
            }
        },
        created () {
            this.$socket.registerCallBack('hotData',this.getData)
        },
        mounted(){
            this.initChart()
            // this.getData()
            this.$socket.send({
                action:'getData',
                socketType:'hotData',
                chartName:'hot',
                value:''
            })
            window.addEventListener('resize',this.screenAdapter)
            this.screenAdapter()
        },
        destroyed () {
            this.$socket.unRegisterCallBack('hotData')
        },
        computed: {
            catName(){
                if(!this.data){
                    return ''
                }else{
                    return this.data[this.currentIndex].name
                }
            },
            comStyle(){
                return {
                    fontSize:this.titleFontSize+'px',
                    color:getThemeValue(this.theme).titleColor
                }
            },
            ...mapState(['theme'])
        },
        methods: {
            initChart(){
                this.chartInstance=this.$echarts.init(this.$refs.hot_ref,this.theme)
                const initOption={
                    title:{
                        text:'▎商品销量分布',
                        left:20,
                        top:20
                    },
                    legend:{
                        top:'15%',
                        icon:'circle'
                    },
                    series:[
                        {
                            type:'pie',
                            label:{
                                show:false
                            },
                            emphasis:{
                                label:{
                                    show:true
                                },
                                labelLine:{
                                    show:false
                                }
                            }
                        }
                    ]
                }
                this.chartInstance.setOption(initOption)
            },
            getData(res){
                // const {data:Data}=await request({url:'hotproduct'})
                this.data=res
                this.updateChart()
            },
            updateChart(){
                const legendArr=this.data[this.currentIndex].children.map(item=>item.name)
                const seriesArr=this.data[this.currentIndex].children.map(item=>{
                    return {
                        name:item.name,
                        value:item.value,
                        childeren:item.children//增加children就可以在tooltip的formatter函数参数arg.data获得三级分类
                    }
                })
                const dataOption={
                    legend:{    
                        data:legendArr
                    },
                    tooltip:{
                        show:true,
                        formatter:arg=>{
                            let total=0
                            let resStr=''
                            const thirdCategoryArr=arg.data.childeren
                            thirdCategoryArr.forEach(item=>total+=item.value)
                            thirdCategoryArr.forEach(item=>{
                                resStr+=`${item.name} ${new Number(item.value/total*100).toFixed(2)}%<br/>`
                            })
                            return resStr
                        }
                    },
                    series:[
                        {
                            data:seriesArr
                        }
                    ]
                }
                this.chartInstance.setOption(dataOption)
            },
            screenAdapter(){
                this.titleFontSize=this.$refs.hot_ref.offsetWidth/100*3.6
                const adapterOption={
                    title:{
                        textStyle:{
                            fontSize:this.titleFontSize
                        }
                    },
                    legend:{
                        itemWidth:this.titleFontSize,
                        itemHeight:this.titleFontSize,
                        itemGap:this.titleFontSize,
                        textStyle:{
                            fontSize:this.titleFontSize/2
                        }
                    },
                    series:[
                        {
                            radius:this.titleFontSize*4.5,
                            center:['50%','60%']//饼图位置
                        }
                    ]
                }
                this.chartInstance.setOption(adapterOption)
                this.chartInstance.resize()
            },
            toLeft(){
                this.currentIndex--
                if(this.currentIndex<0){
                    this.currentIndex=this.data.length-1
                }
                this.updateChart()
            },
            toRight(){
                this.currentIndex++
                if(this.currentIndex>this.data.length-1){
                    this.currentIndex=0
                }
                this.updateChart()
            }
        },
        mixins: [watchThemeMixin]
    }
</script>

<style scoped>
.iconfont{
    font-family: 'iconfont';
    color:white;
    user-select: none;
    cursor: pointer;
}
.arr_left{
    position:absolute;
    left:10%;
    top:50%;
    transform:translateY(-50%)
}
.arr_right{
    position:absolute;
    right:10%;
    top:50%;
    transform:translateY(-50%)
}
.cat-name{
    position: absolute;
    left: 80%;
    bottom: 10%;
    user-select: none;
    color: white;
}
</style>
